console.log("ok...")

// react
import React from 'react'
import ReactDom from 'react-dom'

//// <h1 id="myH1" title="this is a h1">这是一个h1标签</h1>
// 参数1：元素名（标签名）  参数2：元素的属性    参数3：子节点
// const myH1 = React.createElement('h1',{id:'myH1',title:'this is a h1'},'这是一个h1标签')
// const myDiv = React.createElement('div',null,'这是一个div元素',myH1)

// ReactDom 把虚拟dom渲染到页面上
// ReactDom.render(myDiv,document.getElementById('app'))



// ----------------------------------------------------//

// const myDiv = <div id="myDiv" title="this is a Div tag">这是一个div元素
// <h1>这是一个h1标签0000
// </h1>
// </div>

// ReactDom.render(myDiv,document.getElementById('app'))

// ----------------------------------------------------//
// let a = 10+3

// let storyNameAry = ["西游记","红楼梦","三国演义","水浒传"]

// const nameAry = []
// storyNameAry.forEach(item => {
//     const temp = <h5 key={item}>{item}</h5>
//     nameAry.push(temp)
// })

// //数组的map方法 map中必须写return 
// const mapResult = storyNameAry.map(item => {
//     return item +"~~~"
// })

// console.log("mapResult: "+mapResult)

// const myDiv = <div>{a+5}
// <p/>
//  {nameAry}
// <hr/>
// {storyNameAry.map(item => {
//     return <h4 key={item}>{item +"~~~"}</h4>
// })}

// </div>

// ReactDom.render(myDiv,document.getElementById('app'))

// ----------------------------------------------------//

// 第一中创建组件的方式
// function Hello(){
//     return null; // 返回null表示不渲染任何东西
// }

// function Hello(props) {
//     console.log(props)
//     return <div>你好 --- {props.name} --- {props.age} --- {props.gender}</div>
// }

// const user ={
//     name:"小白",
//     age: 10,
//     gender:"男"
// }
// ReactDom.render(
// <div>
// <Hello name={user.name} age={user.age} gender={user.gender}></Hello>
// </div>,document.getElementById('app')
// );


// ----------------------------------------------------//

// function Hello(props) {
//     console.log(props)
//     return <div>你好 --- {props.name} --- {props.age} --- {props.gender}</div>
// }

// const user ={
//     name:"小白",
//     age: 10,
//     gender:"男"
// }
// ReactDom.render(
// <div>
// <Hello {...user}></Hello> {/* ... 为展开运算符*/}
// </div>,document.getElementById('app')
// );

// ----------------------------------------------------//

// 导入自己定义的组件
// import Hello from './components/Hello.jsx'
import Hello from './components/Hello'
import Movie from './components/Movie'
// import CommentList from './components/CommentList'
import CommentList from '@/components/CommentList2'

// import './components/ClassTest'
// import './components/ClassExtendTest'


const user ={
    name:"小白",
    age: 10,
    gender:"男"
}

ReactDom.render(
<div>
<Hello {...user}></Hello> {/* ... 为展开运算符*/}
<p/>
<Movie {...user}></Movie>
<CommentList></CommentList>
</div>,document.getElementById('app')
);

















